<template>
  <view>
    <!-- 搜索框 -->
    <view class="search">
      <u-search
        placeholder="搜索"
        shape="shape"
        input-align="center"
        :show-action="false"
        search-icon
      ></u-search>
    </view>
    <!-- 轮播图 -->
    <u-swiper :list="list" name="image_src" height="340" border-radius="0"></u-swiper>

	<!-- 头部导航 -->
	<view class="nav">
		<image v-for="item in navs" :key="item.index" :src="item.image_src" style="height:80px; width:80px"></image>
	
	</view>

	<!-- 楼层图 -->
	
	<view v-for="(item,index) in floorData" :key="index">
<!-- 楼层title -->
	<image  :src="item.floor_title.image_src" style="width:100%;height:60px;" mode="widthFix">
	
	<!--楼层主要内容  -->
	<view class="contents">
		<!-- 左边竖图 -->
	<navigator>
		<image :src="item.product_list[0].image_src" class="left" ></image>
	</navigator>
	<!-- 右边4宫格图 -->

	<view class="right" >
		
		<!-- 依次 遍历被出来的图片数组，第一张是竖图  如果是第一张直接不渲染 给定样式 -->
			<navigator  v-for="(ite,ind) in item.product_list"
		  :key="ite.name" 
		   v-if="ind!==0" >
		   
		   	<image 	  :src="ite.image_src" style="width:233rpx; height:188rpx;"></image>
		   </navigator>



	
		
	</view>

	

	</view>

	</view>
	


  </view>
</template>

<script>





export default {
  data() {
    return {
      list: [], //轮播数据
	  navs:[],  //头部数据
	  floorData:[] //楼层数据
    };
  },
 onLoad(){
	
	

	this.getData('/home/swiperdata','list') //轮播数据获取
	this.getData('/home/catitems','navs')  //头部导航数据获取
	this.getData('/home/floordata','floorData')  //楼层数据获取



  },
  methods:{
	
	async getData(url,dataName)    //获取数据的请求封装
	{
	const res= await this.$u.get(url)
	res.message? this[dataName]=res.message:console.log('请求方式或者地址错了');
	console.log(this[dataName]); 
	}

	 
	 
  }
};
</script>

<style >


.nav{
	margin-top: 20rpx;
	display: flex;
	justify-content:space-evenly;
	margin-bottom: 10px;
}

.contents{
	display: flex;
	margin-bottom: 10px;
	
	
}
.left{
	flex: 0 0 auto;
	width: 232rpx;
	height: 386rpx;
	margin-left: 12rpx ;
	margin-right: 12rpx;
	

}
.right{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

</style>
